<style>
* {
    margin: 0px;
    padding: 0px;
}

.content {
    width: 100%;
    height: 100vh;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login {
    width: 300px;
    height: 300px;
    margin-top: 200px;
}

.login>h1 {
    /* background-color: aqua; */
    text-align: center;
}
</style>

<template>
    <div class="content">

        <div class="login">
            <h1>用户登录</h1>
            <div style="margin-top: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="用户名">
                    <el-input v-model="userInfo.name" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userInfo.pwd" type="password" placeholder="请输入密码" show-password />
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="getLogin">登录</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, el } from 'element-plus';
import { useRouter } from 'vue-router'

const router = useRouter()

//设置用户名、密码信息位置
const labelPosition = ref('top')

//设置正确的用户名/密码
const rightInfo = ref({ name: 'admin', pwd: '123456' })
//重置
function resetForm() {
    userInfo.value.name = ''
    userInfo.value.pwd = ''
}
//存储用户输入的登录信息
const userInfo = ref({
    name: '',
    pwd: ''
})
//登录
function getLogin() {
    if (userInfo.value.name == rightInfo.value.name && userInfo.value.pwd == rightInfo.value.pwd) {
        ElMessage({
            message: '登录成功',
            type: 'success',
        });
        //登录成功后跳转到首页
        router.push({ path: '/', query: { name: userInfo.value.name } });
    } else {
        ElMessage.error('用户名或密码不正确，登录失败!!!')
    }
}
</script>
  